<template>
  <div class="registerBox">
    <div class="innerBox">
      <div class="tip">
        <span> Welcome to wallpaper. The best is about to get better! </span>
        <span>这里你可以搜索你想要的高清壁纸</span>
        <span>这里你可以上传你想分享的高清壁纸</span>
        <span>这里你可以收藏你喜欢的高清壁纸</span>
        <span>欢迎来到你的壁纸世界</span>
      </div>
      <div class="form">
        <span>Register your account</span>
        <input v-model="userName" type="text" placeholder="Username" />
		<input v-model="email" type="text" placeholder="Email">
		<div>
			<input v-model="keyCode" type="text" placeholder="验证码">
			<input :disabled="isSend" type="button" v-model="tip" @click="sendMail" href="javaScript:void(0)"></input>
		</div>
        <input v-model="passWord" type="password" placeholder="passWord" />
        <input
          v-model="passWord_c"
          type="password"
          placeholder="passWord(confirm)"
        />
        <button @click="register" class="iconfont icon-jinru">Register</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      userName: "",
	  email:"",
      passWord: "",
      passWord_c: "",
	  keyCode:'',
	  //控制发送验证码是否可点
	  isSend:false,
	  //验证码按钮提示
	  tip:"获取验证码"
    };
  },

  methods: {
    async register() {
      if (this.passWord !== this.passWord_c) {
        alert("两次密码请确认输入一致");
      } else {
        await this.$api.userApi.register(this.userName, this.passWord,this.email,this.keyCode).then((res)=>{
			if(res.data.status==412){
				alert("抱歉,该用户名已被注册")
			}else if(res.data.status ==428){
				alert("验证码错误!")
			}else if(res.data.status ==200){
				alert("注册成功")
				this.$router.push({
					path:'/home'
				})
			}
		});
      }
    },
	
	//注册的时候发送验证码到注册邮箱,确认该邮箱是否存在
	sendMail(){
		this.$api.commonApi.sendMail(this.email).then((res)=>{
			if(res.data.status==200){
				alert(res.data.msg)
				this.isSend = true
				this.tip = 60
				let time=setInterval(()=>{
					this.tip--
					if(this.tip==0){
						clearInterval(time)
						this.tip = '获取验证码'
					}
				},1000)
			}else{
				alert(res.data.msg)
			}
			
		})
	}


  },
};
</script>

<style lang="less" scoped>
.registerBox {
padding-top: 120px;
  background-color: #333;
  height: 100vh;
  overflow: hidden;
  .innerBox {
    width: 50%;
    height: 70vh;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    box-shadow: 1px 1px 3px 3px black;
    div {
      height: 70vh;
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tip {
      background-color: black;
      color: white;
      font-size: 30px;
      span {
        width: 80%;
        margin-top: 10px;
      }
      span:nth-child(n + 2) {
        font-size: 20px;
        color: rgb(97, 93, 93);
      }
    }
    .form {
      justify-content: center;
      span {
        color: white;
        font-size: 20px;
      }
      input {
        width: 85%;
        height: 25px;
        margin-top: 20px;
      }
	  div{
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  width: 85%;
		  height: 25px;
		  margin-top: 20px;
		  input:first-child{
			  width: 60%;
			  height: 25px;
			  margin-top: 0;
		  }
		  input:last-child{
			  width: 35%;
			  font-size: 16px;
			  margin-left: 5%;
			  height: 25px;
			  margin-top: 0;
			  color: black;
			  text-decoration: none;
			  text-align: center;
			  background: linear-gradient(to right, #31751d, #a1c25a);
		  }
	  }

      button {
        width: 85%;
        cursor: pointer;
        margin-top: 20px;
        height: 40px;
        background: linear-gradient(to right, #31751d, #a1c25a);
      }
    }
  }
}
</style>